<template>
<li :class="{'sub-menu' : hasSub, 'toggled': hasSub && open, 'active' : active}">
    <a v-link="menu.url" @click="toggleSubmenu"><i class="glyphicon {{ menu.icon }}" v-waves></i>{{ menu.name }}</a>
    <ul v-if="hasSub" v-show="open">
      <li v-for="sm in menu.childMenus">
        <a v-link="sm.url">{{ sm.name }}</a>
      </li>
    </ul>
</li>
</template>

<script>
export default {
  data () {
    return {
      open: false,
      active: false
    }
  },
  props: {
    menu: Object
  },
  methods: {
    toggleSubmenu () {
      if (this.hasSub) {
        this.open = !this.open
      }
    }
  },
  computed: {
    hasSub () {
      return this.menu.childMenus
    }
  },
  ready () {
    let obj = this.$el.querySelector('.v-link-active')
    if (obj) {
      this.toggleSubmenu()
    }
  }
}
</script>